<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
          <tr>
            <td>abcd</td>
            <td>abcd</td>
            <td>abcd</td>
            <td>abcd</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
      var getadd = document.getElementById("addBtn");
      var gettbody = document.querySelector("tbody");
      var getname = document.getElementById("username");
      var getage = document.getElementById("age");
      var getsex = document.getElementById("gender");
      //   getadd.onclick = function () {
      //     var name = getname.value;
      //     var age = getage.value;
      //     var sex = getsex.value;
      //     var tr = document.createElement("tr");
      //     tr.innerHTML = `<td>${name}</td><td>${age}</td><td>${sex}</td><td>删除</td>`;
      //     gettbody.appendChild(tr);
      //     tr.style.textAlign = "center";
      //     tr.lastElementChild.onclick = function () {
      //       tr.remove();
      //     };
      //   };

      //   var arr = [
      //     { username: "张三", age: 20, gender: "男" },
      //     { username: "张四", age: 20, gender: "女" },
      //     { username: "张五", age: 20, gender: "男" },
      //     {
      //       username: "张六",
      //       age: 20,
      //       gender: "女",
      //     },
      //   ];
      var arr = [];
      getadd.onclick = function () {
        var username = getname.value;
        var age = getage.value;
        var gender = getsex.value;
        var obj = { username: username, age: age, gender: gender };
        arr.push(obj);
        renderDom(arr);
      };

      function renderDom(arr) {
        gettbody.innerHTML = "";
        arr.forEach(function (item) {
          var tr = document.createElement("tr");
          tr.innerHTML = `<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td class="del">删除</td>`;
          gettbody.appendChild(tr);
        });
        xx();
      }
      function xx() {
        var getdel = document.querySelectorAll(".del");
        getdel.forEach(function (item, key) {
          item.onclick = function () {
            arr.splice(key, 1);
            renderDom(arr);
          };
        });
      }
      var sortBtn = document.querySelector("#sortBtn");
      sortBtn.onclick = function () {
        arr.sort(function (a, b) {
          return a.age - b.age;
        });
        renderDom(arr);
      };
    </script>
  </body>
</html>
